<template>
  <div class="table-container">
    <div class="table-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>关键字管理</el-breadcrumb-item>
        <el-breadcrumb-item>关键字列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="addBox">
        <h2>小程序展示</h2>
        <div class="addInfoBox">
            <div class="item">
                <span>显示</span>
                <el-radio v-model="radio" label="0">按实时热搜</el-radio>
                <el-radio v-model="radio" label="1">自定义热搜</el-radio>
            </div>
            <template v-if="radio=='0'">
                <div class="item">
                    <span>显示数量</span>
                    <el-input type="text" v-model="num" style="width:30%;"></el-input>
                </div>
                <div class="btn"><el-button type="primary" @click="setSystem">提交</el-button></div>
            </template>
            <template v-else>
                <div class="item">
                    <span>热门搜索</span>
                    <el-input type="text" v-model="input" style="width:30%;"></el-input>
                    <el-button type="primary" @click="addDiy">添加</el-button>
                </div>
                <div class="item">
                    <span></span>
                    <div class="keywordList">
                        <el-tag closable type="info" @close="delTag(item.id)" v-for="(item,index) in diyList" :key="index">{{item.name}}</el-tag>
                    </div>
                </div>
            </template>
        </div>
    </div>
    <div class="table-search">
        <h2>实时热搜</h2>
        <div class="searchBox">
            <el-date-picker
                v-model="valueTime"
                type="daterange"
                @change="selectTime"
                clearable
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <div>
                <el-input
                style="width: 200px;margin-right: 10px"
                placeholder="请输入查询信息"
                v-model="keyword"
                clearable
                @clear="resetData"
                >
                </el-input>
                <el-button type="primary" @click="resetData" >搜索</el-button>
            </div>
        </div>
    </div>
    <div class="table-content">
      <el-table
        border
        empty-text="当前数据空空如也"
        ref="multipleTable"
        :data="offerList"
        tooltip-effect="dark"
        style="width: 100%"
        @select="selectedRow"
        @select-all="selectedAll"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="name" label="名称" width="auto"></el-table-column>
        <el-table-column prop="sort" label="排序" width="auto"></el-table-column>
        <el-table-column prop="status" label="状态" width="auto" :formatter="changeStatus"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="auto" :formatter="changeTime"></el-table-column>
        <!-- <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="activeName=='1'"
              size="mini"
              style="margin-right: 5px"
              @click="handleOffer(scope.$index, scope.row)">确认报价
            </el-button>
            <el-button v-if="activeName=='1'" @click="toCanael(scope.$index, scope.row)" type="warning" size="mini">取消</el-button>
            <el-button slot="reference" @click="delOffer(scope.$index, scope.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="page-nav">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        pageSize: 10,
        total: 0,
        keyword: '',
        offerList: [],
        multipleSelection: [],
        activeName:'1',
        valueTime:[],
        start_date:'',
        end_date:'',
        radio:'0',
        num:'',
        input:'',
        id:'', //配置id
        diyList:[]
      }
    },
    mounted() {
      this.getSystem()
      this.queryList();
      this.getDiyList()
    },
    methods: {
        // 获取配置
        getSystem(){
            this.$http.post('/api/root/Keyword/getConfig').then(res=>{
                console.log(res,'配置信息');
                if(res.code==1){
                    this.radio = res.data.type==0?'0':'1';
                    this.id = res.data.id?res.data.id:'';
                    this.num = res.data.num?res.data.num:'';
                }
            })
        },

        // 提交按钮
        setSystem(){
            let params = {
                config_id:this.id,
                type:this.radio,
                num:this.num
            }
            console.log(params,'----');
            this.$http.post('/api/root/Keyword/setConfig',params).then(res=>{
                if(res.code==1){
                    this.$message.success('修改成功')
                    this.getSystem()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },
        // 获取自定义列表
        getDiyList(){
            this.$http.post('/api/root/Keyword/getCustomList').then(res=>{
                console.log(res,'自定义列表');
                if(res.code==1){
                    this.diyList = res.data?res.data:[]
                }
            })
        },
        // 自定义新增
        addDiy(){
            if(this.input==''){
                this.$message.warning('请输入自定义关键字名称')
                return
            }
            let params = {
                name:this.input,
                sort:0,
                num:this.num,
                type:this.radio
            }
            this.$http.post('/api/root/Keyword/add',params).then(res=>{
                console.log(res,'添加结果');
                if(res.code==1){
                    this.$message.success('添加成功')
                    this.getDiyList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },
        // 自定义删除关键字
        delTag(id){
            this.$http.post('/api/root/Keyword/del',{id}).then(res=>{
                if(res.code==1){
                    this.$message.success('删除成功')
                    this.getDiyList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

        // 表格时间处理
        changeTime(row, column, cellValue, index){
            if(cellValue){
                return this.$moment(cellValue*1000).format('yyyy-MM-DD HH:ss')
            }
        },
        // 表格状态处理
        changeStatus(row, column, cellValue, index){
            if(cellValue==0){
                return '禁用'
            }else{
                return '正常'
            }
        },

        //   删除按钮
        delOffer(index,row){
            console.log(index,row,'1111');
            this.$confirm('此操作将删除该报价, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.toDelete(row.id)
            })
        },
        // 选择时间
        selectTime(e){
            console.log(e,'选择时间');
            this.start_date = this.valueTime?this.$moment(this.valueTime[0]).format('yyyy-MM-DD'):''
            this.end_date = this.valueTime?this.$moment(this.valueTime[1]).format('yyyy-MM-DD'):''
            this.queryList()
        },

        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },



        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.queryList()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.queryList();
        },

        // 切换tab
        handleClick(){
            this.queryList()
        },
        queryList() {
            this.$http.get('/api/root/Keyword/index', {
                page: this.page,
                pagesize: this.pageSize,
                keyword: this.keyword,
                start_date:this.start_date,
                end_date:this.end_date
            }).then(res => {
                console.log(res,'关键字列表');
                if (res.code == 1) {
                    this.offerList = res.data.list?res.data.list:[];
                    this.total = res.data.total;
                }
            })
        },
        toDelete(id_lst) {
            this.$http.post('/api/root/OnekeyOffer/del', {
                id: id_lst,
            }).then(rest => {
                if (rest.code == 1) {
                    this.queryList();
                    this.multipleSelection = [];
                    this.$message.success('删除成功');
                } else {
                    this.$message.error("删除失败");
                }
            })
        }
        ,
        resetData(){
            this.page = 1;
            this.queryList();
        }
    }
  }
</script>
<style lang="less" scoped>
  @import 'list.less';
</style>
